<template>
  <div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
      </div>
      <div class="panel-body">
        <form class="form-inline" role="form" style="float:left;">
          <div class="form-group has-feedback">
            <div class="input-group">
              <div class="input-group-addon">查询条件</div>
              <input id="queryText" class="form-control has-success" type="text" placeholder="请输入查询条件">
            </div>
          </div>
          <button id="queryBtn" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
        </form>
        <button type="button" @click="toremoves" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
        <button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='${APP_PATH}/user/toadd'"><i class="glyphicon glyphicon-plus"></i> 新增</button>
        <br>
        <hr style="clear:both;">
        <div class="table-responsive">
          <form id="userForm">
            <table class="table  table-bordered">
              <thead>
              <tr >
                <th width="30">#</th>
                <th width="30"><input type="checkbox" v-model="allSelectStatus"></th>
                <th>名称</th>
                <th width="100">操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(role,index) in roleList" :key="index">
                <td>{{index+1}}</td>
                <td><input type="checkbox" v-model="role.status"></td>
                <td>{{role.name}}</td>
                <td>
                  <button type="button" @click="toaddpermission(role.id)" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>
                  <button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>
                  <button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>
                </td>
              </tr>
              </tbody>
              <tfoot>
              <tr >
                <td colspan="6" align="center">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageno"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </td>
              </tr>

              </tfoot>
            </table>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      roleList: [],
      pageno: 1,
      pagesize: 5,
      queryText: '',
      total: 0,
      pagenototal: 0,
      allSelectStatus: false
    }
  },
  mounted () {
    this.pageQuery()
  },
  methods: {
    pageQuery () {
      let jsondata = this.$qs.stringify({
        pageno: this.pageno,
        pagesize: this.pagesize,
        queryText: this.queryText
      })
      axios.post('/api/role/getPageInfo', jsondata).then((response) => {
        const res = response.data.data
        console.log(res)
        this.roleList = res.datas
        this.roleList.forEach(role => {
          role.status = false
        })
        this.total = res.total
        this.pagenototal = res.pagenototal
      }).catch(function (error) {
        console.log(error)
      })
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.pageQuery()
    },
    handleCurrentChange (val) {
      this.pageno = val
      this.pageQuery()
    },
    toaddpermission (id) {
      this.$router.push({path: `/layout/bottom/center/role/AddPermission/${id}`})
    },
    toremoves () {
      let roleids = ''
      this.userInfos.forEach(role => {
        if (role.status) {
          roleids = roleids + 'roleids=' + role.id + '&'
        }
      })
      roleids = roleids.substring(0, roleids.length - 1)
      if (roleids.length > 0) {
        axios.post('/api/role/removes', roleids).then((response) => {
          const success = response.data.success
          if (success) {
            this.pageQuery()
          }
        }).catch(function (error) {
          console.log(error)
        })
      }
    }
  },
  watch: {
    allSelectStatus: {
      deep: true, // 深度监视
      handler: function (val) { // 新值和老值
        if (this.roleList.length > 0) {
          this.roleList.forEach(role => {
            role.status = val
          })
        }
      }
    }
  }
}
</script>
<style></style>
